import React, { Component } from 'react'
import { produce } from 'immer'

class Content extends Component {
  state = {
    menuIndexs: [0, 0]
  }

  changeMenuIndex = index => {
    this.setState(
      produce(draft => {
        draft.menuIndexs[this.props.navIndex] = index
      })
    )
  }

  render() {
    const { menuIndexs } = this.state
    const { data, navIndex, onItemClick } = this.props
    const menuIndex = menuIndexs[navIndex]
    const menuData = Object.keys(data)
    const contentData = data[menuData[menuIndex]]

    return (
      <div className='category-content'>
        <div className='menu'>
          <ul>
            {menuData.map((item, index) => {
              return (
                <li
                  onClick={() => {
                    this.changeMenuIndex(index)
                  }}
                  className={index === menuIndex ? 'active' : ''}
                  key={index}
                >
                  <span>{item}</span>
                </li>
              )
            })}
          </ul>
        </div>
        <div className='main'>
          <ul>
            {contentData.map((item, index) => {
              return (
                <li key={index} onClick={() => onItemClick(item)}>
                  {item}
                </li>
              )
            })}
          </ul>
        </div>
      </div>
    )
  }
}

Content.defaultProps = {
  onItemClick: () => {}
}

export default Content
